<!DOCTYPE html><!--HTML5 doctype-->
<html>
<head>
<title>菜单</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!--<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=no" />-->
<meta name="apple-mobile-web-app-capable" content="yes" />
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<link rel="stylesheet"  type="text/css" href="../kitchensink/android.css" title="synergy"/>
<link rel="stylesheet"  type="text/css" href="../kitchensink/iphone.css" title="synergy"/>

<link rel="text/stylesheet" href="http://cdn.jqmobi.com/themes/icons.css"/>
<!-- uncomment for AppMobi apps
<script type="text/javascript" charset="utf-8" src="http://localhost:58888/_appMobi/appmobi.js"></script> 
<script type="text/javascript" charset="utf-8" src="http://localhost:58888/_appMobi/xhr.js"></script> 	
-->
<script type="text/javascript" charset="utf-8" src="../jq.mobi.js"></script> 
<!-- include touch.js on desktop browsers only -->
<script>
function loadedPanel(what){
    //We are going to set the badge as the number of li elements inside the target
	//$.ui.updateBadge("#jqmlink",$("#jqm").find("li").length);
}
function unloadedPanel(what){
	console.log("unloaded "+what.id);
}
if(!((window.DocumentTouch&&document instanceof DocumentTouch)||'ontouchstart' in window)){
var script=document.createElement("script");
script.src="../touch.js";
var tag=$("head").append(script);
$.os.android=true; //let's make it run like an android device
$.os.desktop=true;
}
//$.ui.backButtonText = 'B';
</script>

<script type="text/javascript" charset="utf-8" src="../ui/jq.ui.js"></script>
<script type="text/javascript" charset="utf-8" src="../plugins/jq.drawer.js"></script>
<script type="text/javascript" charset="utf-8" src="../plugins/mawScroller.js"></script>
<script type="text/javascript" charset="utf-8" src="../synergy/js/jq.ui.dialog.js"></script> 
<script type="text/javascript" charset="utf-8" src="../synergy/js/jq.slidable.js"></script> 
<script type="text/javascript" charset="utf-8" src="js/jq.tabs.js"></script>
<script type="text/javascript">
    /* This function runs once the page is loaded, but appMobi is not yet active */
	var webRoot="../kitchensink/";
	$.ui.isAjaxApp=true;// Must be set before $.ui.launch is executed
	$.ui.autoLaunch=false;  //By default, it is set to true and you're app will run right away.  We set it to false to show a splashscreen
    $.ui.openLinksNewTab=true;
	//$.ui.loadDefaultHash=true; //Never load based off the hash/url
    var init = function(){
	   $.ui.backButtonText="&nbsp;";
	   window.setTimeout(function(){$.ui.launch();},50);
       //$.ui.removeFooterMenu(); This would remove the bottom nav menu
    };
    document.addEventListener("DOMContentLoaded",init,false);


	$.ui.ready(function(){    //This function will get executed when $.ui.launch has completed
		console.log('ready');



	});
   
    /* This code prevents users from dragging the page */
    var preventDefaultScroll = function(event) {
        event.preventDefault();
        window.scroll(0,0);
        return false;
    };
	
	document.addEventListener('touchmove', preventDefaultScroll, false);

    /* This code is used to run as soon as appMobi activates */
    var onDeviceReady=function(){
		AppMobi.device.setRotateOrientation("portrait");
        AppMobi.device.setAutoRotate(false);
		webRoot=AppMobi.webRoot+"kitchensink/";
	    //hide splash screen
	    //AppMobi.device.hideSplashScreen();	
		
    };
    document.addEventListener("appMobi.device.ready",onDeviceReady,false);    
	function showHide(obj,objToHide){
		var el=$("#"+objToHide)[0];
		
		if(obj.className=="expanded"){
			obj.className="collapsed";
		}
		else{
			obj.className="expanded";
		}
		$(el).toggle();
		
	}
	
</script>
</head>
<body>
<div id="jQUi">
<!-- this is the splashscreen you see. -->

<div id="content">
	<div   data-header="firstheader" id="main" class="panel" selected="true" data-load="loadedPanel" data-unload="unloadedPanel" data-tab="navbar_home">
		<div style='width:96%; margin:2%;overflow:hidden'>

            <button onclick="$.ui.toggleSideMenu()">slideMenu</button> <br/>
            <button onclick="$.ui.toggleHeaderMenu()">toggleHeaderMenu</button> <br/>


		<h5 class='expanded' onclick='showHide(this,"main_info");' ><span></span>销售机会</h5>
		<ul id='main_info' class="navul">
         <li><a href="accordion.html"  title="accordion">accordion</a></li>
		 <li class=''><a href="#jqm">单页面加载div </a></li>
         <li class=''><a href="#modalPage">modal page</a></li>
         <li class=''><a href="#remotePage">remotePage</a></li>

         <li><a href="#jq-badge">jq-badge</a></li>
         <li><a href="#vectorIcon">vectorIcon</a></li>
         <li><a href="#webdrawer" data-refresh-ajax="true">抽屉控件（首页）</a></li>
         <li><a href="NewDiv.html" >动态添加Div</a></li>
         <li><a href="ul.html" data-refresh-ajax="true" data-transition='pop' title="用户列表">用户列表(通信录)</a></li>
         <li><a href="ul.html" data-dialog='true' onconfirm="alert('sleeping');">对话框(外连接)</a></li>
         <li><a href="f2.html" data-dialog='true' title="条件搜索">通讯录</a></li>
         <li><a href="tab.html" >Ajax Tab页</a></li>
         <li><a href="NewSales.html"  title="NewSales">NewSales</a></li>
         <li><a href="Search.html"  title="Search">Search</a></li>
         <li><a href="NewFlow.html"  title="NewFlow">NewFlow</a></li>
         <li><a href="Excel.html"  title="Excel">Excel</a></li>
         <li><a href="new1.html"  title="set">Set</a></li>

		</ul>
        </div>
	</div>

	<!-- ------------------------------------------ -->
	
	<div id="jqm" class="panel" data-header="testheader"  data-footer="none" >
        单页面加载div <br/>
        单页面加载div <br/>
        单页面加载div <br/>
        单页面加载div <br/>
        单页面加载div <br/>
        单页面加载div <br/>
        单页面加载div <br/>
        单页面加载div <br/>
        单页面加载div <br/>
        单页面加载div <br/>
        单页面加载div <br/>
        单页面加载div <br/>
        单页面加载div <br/>
	</div>

    <div id="modalPage" class="panel" data-header="testheader" modal="true">
        modal page <br/>
        modal page <br/>
        modal page <br/>
        modal page <br/>
        modal page <br/>
        modal page <br/>
        modal page <br/>
        modal page <br/>
        modal page <br/>
        modal page <br/>
        modal page <br/>
        modal page <br/>

        modal page <br/>
        modal page <br/>
        modal page <br/>
        modal page <br/>
        modal page <br/>
        modal page <br/>

    </div>

    <div id="remotePage" class="panel" data-header="testheader" data-defer="ddd.html">
        remotePage
    </div>

    <div id="vectorIcon" class="panel" data-header="testheader">
        <!-- lets show a home icon before the text HOME -->
        <div class='icon home'>Home</div>

        <!-- lets show a small home icon before the text HOME -->
        <div class='icon home mini'>mini Home</div>

        <!-- lets show a big home icon before the text HOME -->
        <div class='icon home big'>big Home</div>


        <!-- lets show a home icon before the text HOME -->
        <div class='icon set'>Set</div>

        <!-- lets show a small home icon before the text HOME -->
        <div class='icon set mini'>mini Set</div>

        <!-- lets show a big home icon before the text HOME -->
        <div class='icon set big'>big Set</div>


    </div>

    <div id="jq-badge" class="panel" title="jq-badge">
        <div style="width:200px;height: 80px;border: 1px solid green">
            <span class="jq-badge tr">3</span>

        </div>

        <div id="badgeDiv" style="width:200px;height: 80px;border: 1px solid green">

            <button type="button" onclick="$.ui.updateBadge('badgeDiv','100','bl','green')">add badge</button>
        </div>

    </div>
</div>


<!--
You can add a splashscreen to your app by adding a div in the jQUi div and setting the id to "splashscreen".
When jq.ui.launch is called, it will remove the splashscreen from the DOM.
-->
<div id="splashscreen" class='ui-loader'>
        <img src="../kitchensink/images/splash.png">
        <br><br>
        <span class='ui-icon ui-icon-loading spin'></span><h1 >Starting app</h1>
</div>
<!-- ------------------------------------------ -->
<!-- navbar -->
<!-- navbar -->
<div id="navbar" style='margin: 0;float:left;'>
    <a href="#main" id='navbar_ui' class='icon search' ></a>
    <a href="#jqm" id='navbar_js' class="icon new_add" ></a>
    <a href="#jqm" id='navbar_js' class="icon navmenu" ></a>
    <a href="#jqmui" id='navbar_home'  class="icon home" ></a>
	<a href="#jqmweb" id='navbar_plugins'  class="icon set" ></a>
</div>

<nav id="main_nav">
    <div class='title'>Home</div>
    <ul>
        <li class="icon home mini"><a href="#main">Home</a></li>
    </ul>
</nav>


<header id="firstheader">
    <a id="backButton" ></a>
    <h1>welcome222222222</h1>
</header>
<header id="testheader">
    <a id="backButton" onclick="$.ui.goBack()" class="icon_back" style='display:block;left:0px;left:auto;overflow:hidden'></a>
    <h1>Custom Header</h1>
</header>
<!-- ------------------------------------------ -->


</body>
</html>
